import {
  DesktopOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
  PoweroffOutlined,
} from '@ant-design/icons';
import { withRouter } from 'umi';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu } from 'antd';
import React, { useState } from 'react';
import { Link } from 'umi';
import './index.less';
const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

function index(props: any) {
  const items: MenuItem[] = [
    getItem(<Link to="/index/Home">楼盘管理</Link>, '1', <PieChartOutlined />, [
      getItem(<Link to="/index/Home/Wq">楼盘列表</Link>, '3a'),
      getItem(<Link to="/index/Home/oldhouse">二手房</Link>, '3b'),
      getItem(<Link to="/index/Home/newhouse">新房</Link>, '3c'),
    ]),
    getItem(
      <Link to="/index/Class">客服信息总览</Link>,
      '2',
      <DesktopOutlined />,
    ),
    getItem(
      <Link to="/index/Commerce">写字楼</Link>,
      '7',
      <PieChartOutlined />,
      [
        getItem(<Link to="/index/Commerce/Sale">出售管理</Link>, '3e'),
        getItem(<Link to="/index/Commerce/Hire">出租管理</Link>, '3d'),
      ],
    ),
    getItem(<Link to="/index/Shops">商铺</Link>, '8', <PieChartOutlined />, [
      getItem(<Link to="/index/Shops/Sale">出售管理</Link>, '3e'),
      getItem(<Link to="/index/Shops/Hires">出租管理</Link>, '3f'),
    ]),
    getItem(<Link to="/index/Cart">会话列表</Link>, 'sub1', <UserOutlined />, [
      getItem(<Link to="/index/Cart/Kefu">客服</Link>, '3'),
      getItem(<Link to="/index/Cart/Youke">游客列表</Link>, '4'),
      getItem(<Link to="/index/Cart/Kefulist">服务记录</Link>, '5'),
      getItem(<Link to="/index/Cart/Liaotian">聊天记录</Link>, '6'),
    ]),
    getItem(<Link to="/index/My">我的</Link>, 'sub2', <TeamOutlined />),
  ];
  const [collapsed, setCollapsed] = useState(false);
  const zhuxiao = () => {
    const { history } = props;
    localStorage.removeItem('token');
    history.push('/login');
  };
  return (
    <div>
      <Layout style={{ minHeight: '100vh' }}>
        <Sider
          collapsible
          collapsed={collapsed}
          onCollapse={(value) => setCollapsed(value)}
        >
          <div className="logo">后台管理系统</div>
          <Menu
            theme="dark"
            defaultSelectedKeys={['1']}
            mode="inline"
            items={items}
          />
        </Sider>
        <Layout className="site-layout">
          <Header style={{ float: 'left' }}>
            <div style={{ float: 'left' }}>
              <Link to="/index/home/Wq">楼盘列表</Link>
            </div>
            <div style={{ float: 'left', marginLeft: 30 }}>
              <Link to="/index/Class">客服信息总览</Link>
            </div>
            <div style={{ float: 'left', marginLeft: 30 }}>
              <Link to="/index/Cart/Youke">游客列表</Link>
            </div>
            <div style={{ float: 'left', marginLeft: 30 }}>
              <Link to="/index/Shops/Hires">商业</Link>
            </div>
            <div style={{ float: 'left', marginLeft: 30 }}>
              <Link to="/index/My">我的</Link>
            </div>
            <div style={{ float: 'left', marginLeft: 30 }}>
              <Link to="/index/cart/Kefu">客服</Link>
            </div>
            <button className="btn" onClick={zhuxiao}>
              <PoweroffOutlined />
              注销
            </button>
          </Header>
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}></Breadcrumb>
            <div
              className="site-layout-background"
              style={{ padding: 24, minHeight: 360 }}
            >
              {props.children}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>111</Footer>
        </Layout>
      </Layout>
    </div>
  );
}

export default withRouter(index);
